<!--
 * @Author: zhangjingyu
 * @Date: 2020-12-30 11:38:41
 * @LastEditors: zhangjingyu
 * @LastEditTime: 2021-01-05 15:40:40
 * @FilePath: \vprisk-weifuwu\src\views\workFlow\bpmn.vue
 * @Description: 
-->
<template>
<div class="bpmn">
  <div class="containers">
    <div class="canvas-box" ref="canvas" ></div>
  </div>
    <div id="js-properties-panel" class="panel"></div>
</div>

</template>

 <script>
// 引入相关的依赖
import BpmnModeler from "bpmn-js/lib/Modeler";
import propertiesPanelModule from "bpmn-js-properties-panel";
import propertiesProviderModule from "bpmn-js-properties-panel/lib/provider/camunda";
import camundaModdleDescriptor from "camunda-bpmn-moddle/resources/camunda";

let xmlStr =
  '<?xml version="1.0" encoding="UTF-8"?>\n' +
  '<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="Definitions_0fppxr8" targetNamespace="http://bpmn.io/schema/bpmn">\n' +
  '  <bpmn:process id="Process_1" isExecutable="false">\n' +
  '    <bpmn:startEvent id="StartEvent_1" name="begin&#10;">\n' +
  "      <bpmn:outgoing>SequenceFlow_0nrfbee</bpmn:outgoing>\n" +
  "    </bpmn:startEvent>\n" +
  '    <bpmn:task id="Task_0ho18x0" name="hello&#10;">\n' +
  "      <bpmn:incoming>SequenceFlow_0nrfbee</bpmn:incoming>\n" +
  "      <bpmn:outgoing>SequenceFlow_00ho26x</bpmn:outgoing>\n" +
  "    </bpmn:task>\n" +
  '    <bpmn:task id="Task_1ymuvem" name="world">\n' +
  "      <bpmn:incoming>SequenceFlow_00ho26x</bpmn:incoming>\n" +
  "      <bpmn:outgoing>SequenceFlow_18df8vb</bpmn:outgoing>\n" +
  "    </bpmn:task>\n" +
  '    <bpmn:endEvent id="EndEvent_1c0ed2n" name="end">\n' +
  "      <bpmn:incoming>SequenceFlow_18df8vb</bpmn:incoming>\n" +
  "    </bpmn:endEvent>\n" +
  '    <bpmn:sequenceFlow id="SequenceFlow_0nrfbee" sourceRef="StartEvent_1" targetRef="Task_0ho18x0" />\n' +
  '    <bpmn:sequenceFlow id="SequenceFlow_00ho26x" sourceRef="Task_0ho18x0" targetRef="Task_1ymuvem" />\n' +
  '    <bpmn:sequenceFlow id="SequenceFlow_18df8vb" sourceRef="Task_1ymuvem" targetRef="EndEvent_1c0ed2n" />\n' +
  "  </bpmn:process>\n" +
  '  <bpmndi:BPMNDiagram id="BPMNDiagram_1">\n' +
  '    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">\n' +
  '      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">\n' +
  '        <dc:Bounds x="173" y="102" width="36" height="36" />\n' +
  "        <bpmndi:BPMNLabel>\n" +
  '          <dc:Bounds x="178" y="145" width="27" height="27" />\n' +
  "        </bpmndi:BPMNLabel>\n" +
  "      </bpmndi:BPMNShape>\n" +
  '      <bpmndi:BPMNShape id="Task_0ho18x0_di" bpmnElement="Task_0ho18x0">\n' +
  '        <dc:Bounds x="485" y="244" width="100" height="80" />\n' +
  "      </bpmndi:BPMNShape>\n" +
  '      <bpmndi:BPMNShape id="Task_1ymuvem_di" bpmnElement="Task_1ymuvem">\n' +
  '        <dc:Bounds x="712" y="391" width="100" height="80" />\n' +
  "      </bpmndi:BPMNShape>\n" +
  '      <bpmndi:BPMNShape id="EndEvent_1c0ed2n_di" bpmnElement="EndEvent_1c0ed2n">\n' +
  '        <dc:Bounds x="1056" y="568" width="36" height="36" />\n' +
  "        <bpmndi:BPMNLabel>\n" +
  '          <dc:Bounds x="1065" y="611" width="19" height="14" />\n' +
  "        </bpmndi:BPMNLabel>\n" +
  "      </bpmndi:BPMNShape>\n" +
  '      <bpmndi:BPMNEdge id="SequenceFlow_0nrfbee_di" bpmnElement="SequenceFlow_0nrfbee">\n' +
  '        <di:waypoint x="209" y="120" />\n' +
  '        <di:waypoint x="347" y="120" />\n' +
  '        <di:waypoint x="347" y="284" />\n' +
  '        <di:waypoint x="485" y="284" />\n' +
  "      </bpmndi:BPMNEdge>\n" +
  '      <bpmndi:BPMNEdge id="SequenceFlow_00ho26x_di" bpmnElement="SequenceFlow_00ho26x">\n' +
  '        <di:waypoint x="585" y="284" />\n' +
  '        <di:waypoint x="649" y="284" />\n' +
  '        <di:waypoint x="649" y="431" />\n' +
  '        <di:waypoint x="712" y="431" />\n' +
  "      </bpmndi:BPMNEdge>\n" +
  '      <bpmndi:BPMNEdge id="SequenceFlow_18df8vb_di" bpmnElement="SequenceFlow_18df8vb">\n' +
  '        <di:waypoint x="812" y="431" />\n' +
  '        <di:waypoint x="934" y="431" />\n' +
  '        <di:waypoint x="934" y="586" />\n' +
  '        <di:waypoint x="1056" y="586" />\n' +
  "      </bpmndi:BPMNEdge>\n" +
  "    </bpmndi:BPMNPlane>\n" +
  "  </bpmndi:BPMNDiagram>\n" +
  "</bpmn:definitions>\n";

export default {
  name: "",
  components: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 载入后, Vue 实例挂载到实际的 DOM 操作完成，一般在该过程进行 Ajax 交互
  mounted() {
    this.init();
  },
  data() {
    return {
      // bpmn建模器
      bpmnModeler: null,
      container: null,
      canvas: null,
    };
  },
  methods: {
    init() {
      // 获取到属性ref为“canvas”的dom节点
      const canvas = this.$refs.canvas;
      // 建模
      this.bpmnModeler = new BpmnModeler({
        container: canvas,
        //添加控制板
        propertiesPanel: {
          parent: "#js-properties-panel",
        },
        additionalModules: [
          // 右边的属性栏
          propertiesProviderModule,
          propertiesPanelModule,
        ],
        moddleExtensions: {
          camunda: camundaModdleDescriptor,
        },
      });

      this.createNewDiagram();
    },
    createNewDiagram() {
      // 将字符串转换成图显示出来
      this.bpmnModeler.importXML(xmlStr, (err) => {
        if (err) {
          // console.error(err)
        } else {
          // 这里是成功之后的回调, 可以在这里做一系列事情
          this.success();
        }
      });
    },
    success() {
      this.$message.success("创建成功!");
    },
  },
};
</script>

<style scoped>
.bpmn{
  width: 99%;
  background-color: #fff;
  height: 100%;
}
.containers {
  position: absolute;
  background-color: #fff;
  width: 100%;
  height: 100%;
  overflow: hidden;

}
.canvas-box {
  width: 100%;
  height: 100%;
}
.panel {
  position: absolute;
  right: 0;
  width: 300px;
 
}
/deep/.bpp-properties-tabs-container{
   height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
